<template>
  <el-table :data="dataSource" :span-method="objectSpanMethod">
    <el-table-column prop="title1" label="评估类别" width="180"></el-table-column>
    <el-table-column prop="title2" label="评估要素" width="180"></el-table-column>
    <el-table-column prop="title3" label="评估要点" width="180"></el-table-column>
    <el-table-column prop="title4" label="审核标准" width="180"></el-table-column>
    <el-table-column prop="title5" label="总分值" width="180"></el-table-column>
    <el-table-column prop="title6" label="状态" width="180"></el-table-column>
  </el-table>
</template>

<script>
import { cloneDeep } from "lodash";
import * as buffer from "buffer";

export default {
  name: "table",
  data() {
    return {
      dataSource: [],
      colStartIndex: 0,
      mockData: [
        {
          title1: '我是title1',
          children: [
            {
              title2: '我是title2',
              children: [
                {
                  title3: '我是title3',
                  title4: '我是title4',
                  title5: '我是title5',
                  title6: '我是title6'
                },
                {
                  title3: '我是title3',
                  title4: '我是title4',
                  title5: '我是title5',
                  title6: '我是title6'
                }
              ]
            },
            {
              title2: '我是title2',
              children: [
                {
                  title3: '我是title3',
                  title4: '我是title4',
                  title5: '我是title5',
                  title6: '我是title6'
                }
              ]
            }
          ]
        },
        {
          title1: '我是title1的兄弟',
          children: [
            {
              title2: '我是title2的兄弟',
              children: [
                {
                  title3: '我是title3的兄弟',
                  title4: '我是title4的兄弟',
                  title5: '我是title5的兄弟',
                  title6: '我是title6的兄弟'
                },
                {
                  title3: '我是title3的兄弟',
                  title4: '我是title4的兄弟',
                  title5: '我是title5的兄弟',
                  title6: '我是title6的兄弟'
                }
              ]
            },
            {
              title2: '我是title2',
              children: [
                {
                  title3: '我是title3',
                  title4: '我是title4',
                  title5: '我是title5',
                  title6: '我是title6'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.dealData()
    console.log(this.dataSource)
  },
  methods: {
    dealData() {
      this.mockData.forEach(item => {
        let arr = []
        this.flat(item, arr)
        this.dataSource = this.dataSource.concat(arr)
      })
    },

    flat(obj, arr) {
      if(!obj.children) {
        arr.push(obj)
      } else {
        const children = cloneDeep(obj.children)
        delete obj.children
        children.forEach((item) => {
          this.flat({ ...obj, ...item }, arr)
        })
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if(columnIndex === 0 || columnIndex === 1) {
        // 获取当前行的值
        const curRowValue = row[column.property]
        // 获取上一行的值
        const preRow = this.dataSource[rowIndex - 1]
        const preRowValue = preRow ? preRow[column.property] : null

        if(preRowValue === curRowValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.dataSource.length; i ++) {
            const nextRowValue = this.dataSource[i][column.property]
            if(nextRowValue === curRowValue) {
              rowspan ++
            } else {
              break
            }
          }
          return { rowspan, colspan: 1 }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
